<template>
  <div class="home-root">
    <!-- Banner区：轮播+欢迎语 -->
    <el-card class="banner-card">
      <el-row
        gutter="32"
        align="middle"
      >
        <el-col :span="14">
          <el-carousel
            height="220px"
            indicator-position="outside"
            arrow="always"
          >
            <el-carousel-item
              v-for="item in carouselImages"
              :key="item"
            >
              <img
                :src="item"
                class="banner-img"
              >
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col
          :span="10"
          class="welcome-col"
        >
          <h1 class="welcome-title">
            欢迎来到校园外卖平台
          </h1>
          <p class="welcome-desc">
            便捷点餐，安全配送，服务全校师生
          </p>
        </el-col>
      </el-row>
    </el-card>

    <!-- ECharts 卡片区 -->
    <el-card class="chart-card">
      <div
        ref="chartRef"
        class="chart-box"
      />
    </el-card>

    <!-- 快捷入口区 -->
    <el-row
      gutter="24"
      class="quick-row"
    >
      <el-col
        v-for="entry in quickEntries"
        :key="entry.title"
        :span="6"
      >
        <el-card
          class="quick-card"
          @click="() => $router.push(entry.path)"
        >
          <el-icon
            :size="32"
            class="quick-icon"
          >
            <component :is="entry.icon" />
          </el-icon>
          <div class="quick-title">
            {{ entry.title }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { User, Shop, List, Document } from '@element-plus/icons-vue'

echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer])

const router = useRouter()

// 轮播图图片
const carouselImages = ref([
  'https://preview.qiantucdn.com/auto_machine/20250121/fd3d4aa9-98a3-4f66-8329-148fd5589044.jpg!qt1024_1',
  'https://preview.qiantucdn.com/58pic/70/85/35/16P58PICG8PbDa4KJbSFp_PIC2018.jpg!qt1024_1',
  'https://preview.qiantucdn.com/58pic/ali_magnify/pU/FZ/sa/lD/o2lent05y4ru8kdp3bc7hjqwgzsiamxf_PIC2018.png!qt1024_1'
])

// 快捷入口
const quickEntries = ref([
  { title: '订单管理', path: '/orders', icon: List },
  { title: '商家管理', path: '/shops', icon: Shop },
  { title: '个人中心', path: '/profile', icon: User },
  { title: '公告', path: '/', icon: Document }
])

// ECharts 图表
const chartRef = ref<HTMLDivElement | null>(null)
const initChart = () => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    title: { text: '本周外卖销量', left: 'center' },
    tooltip: {},
    legend: { data: ['销量'], top: 30 },
    grid: { left: 40, right: 20, bottom: 30, top: 60 },
    xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: { color: '#409EFF', borderRadius: [6, 6, 0, 0] }
      }
    ]
  })
}
onMounted(initChart)
</script>

<style scoped>
.home-root {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 0 40px 0;
}
.banner-card {
  margin-bottom: 32px;
  box-shadow: 0 2px 12px #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
.welcome-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 220px;
  padding-left: 16px;
}
.welcome-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #222;
}
.welcome-desc {
  font-size: 1.1rem;
  color: #666;
}
.chart-card {
  margin-bottom: 32px;
  border-radius: 16px;
  box-shadow: 0 2px 12px #e6e6e6;
  padding: 24px 16px;
}
.chart-box {
  width: 100%;
  height: 320px;
}
.quick-row {
  margin-top: 8px;
}
.quick-card {
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 32px 0 20px 0;
  background: #fff;
}
.quick-card:hover {
  box-shadow: 0 4px 16px #d0e2ff;
}
.quick-icon {
  color: #409EFF;
  margin-bottom: 8px;
}
.quick-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}
</style> 